<template>
  <div class="app-container">
    <el-form class="basic-form" ref="form" :model="form" label-width="120px" :rules="rules">
      <el-row>
        <el-col :span="8">
          <el-form-item label="职位" prop="position">
            <el-input v-model="form.position" placeholder="请输入" style="width: 200px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="薪资" prop="salary">
            <el-input v-model="form.salary" placeholder="请输入" style="width: 200px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经验要求" prop="experienceRequire">
            <el-input v-model="form.experienceRequire" placeholder="请输入" style="width: 200px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历要求" prop="educationRequire">
            <el-input v-model="form.educationRequire" placeholder="请输入" style="width: 200px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作地点" prop="workSite">
            <el-input v-model="form.workSite" placeholder="请输入" style="width: 200px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职位性质" prop="positionNature">
            <el-input v-model="form.positionNature" placeholder="请输入" style="width: 200px;" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="序号" prop="sortNumber">
            <el-input-number v-model="form.sortNumber" controls-position="right" :min="0" clearable></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否启用" prop="isEnable">
            <el-select v-model="form.isEnable" placeholder="请选择" clearable>
              <el-option
                v-for="item in config.isEnableOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否删除" prop="isDelete">
            <el-select v-model="form.isDelete" placeholder="请选择" clearable>
              <el-option
                v-for="item in config.isEnableOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="岗位要求" prop="positionRequire">
        <!-- <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.positionRequire">
        </el-input> -->
        <tinymce ref="tinymce" v-model="form.positionRequire" :height="300" />
      </el-form-item>
      <el-form-item label="岗位职责" prop="positionDuties">
        <!-- <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入内容"
          v-model="form.positionDuties">
        </el-input> -->
        <tinymce ref="tinymce" v-model="form.positionDuties" :height="300" />
      </el-form-item>
      <el-form-item label="在线申请" prop="onlineApply">
        <!-- <el-input v-model="form.onlineApply" placeholder="请输入内容" /> -->
        <tinymce ref="tinymce" v-model="form.onlineApply" :height="300" />
      </el-form-item>


      <el-form-item>
        <el-button v-waves type="primary" @click="handleSubmit()">提交</el-button>
        <el-button v-waves @click="handleReset()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce';
import SingleImageUpload from '@/components/Upload/SingleImage';
import waves from '@/directive/waves';
import * as recruitmentHttp from '@/api/recruitment';
import * as config from '@/utils/config';

export default {
  name: 'careers-edit',
  components: { Tinymce, SingleImageUpload, Tinymce },
  directives: { waves },
  data() {
    return {
      form: {},
      rules: {
        position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
        salary: [{ required: true, message: '请输入薪资', trigger: 'blur' }],
        experienceRequire: [{ required: true, message: '请输入经验要求', trigger: 'blur' }],
        educationRequire: [{ required: true, message: '请输入学历要求', trigger: 'blur' }],
        workSite: [{ required: true, message: '请输入工作地点', trigger: 'blur' }],
        positionNature: [{ required: true, message: '请输入职位性质', trigger: 'blur' }],
        positionRequire: [{ required: true, message: '请输入岗位要求', trigger: 'blur' }],
        positionDuties: [{ required: true, message: '请输入岗位职责', trigger: 'blur' }],
        onlineApply: [{ required: true, message: '请输入在线申请', trigger: 'blur' }],
        isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
        sortNumber: [{ required: true, message: '请输入序号', trigger: ['change', 'blur'] }],
        isDelete: [{ required: true, message: '请选择是否删除', trigger: 'change' }]
      },

      // 下拉框等配置
      config
    }
  },
  mounted() {
    this.form = Object.assign({}, this.$store.state.recruitment.recruitmentMap);
  },
  methods: {
    handleSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          let res;

          if (this.form.recruitmentId !== void 0) {
            res = await recruitmentHttp.updateRecruitment(this.form);
          } else {
            res = await recruitmentHttp.addRecruitment(this.form);
          }

          this.$message.success('提交成功');

          this.$router.push('/recruitment/careers');
        } catch(e) {
          console.log('news-center/edit: ', e);
          this.$message.error('提交失败');
        }
      });
    },

    handleReset() {
      this.$refs['form'].resetFields();
    },
  }
}
</script>
